<!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Path2D test</title>
</head>
<body>
    <h1>Path2D test</h1>
    <p>These examples are taken from <a href="https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D">MDN</a>.</p>

    <h2>Basic example</h2>
    <p>Should be a square and a circle, both as outlines.</p>
    <canvas id="canvas"></canvas>

    <h2>SVG Path example</h2>
    <p>Should display a filled black square.</p>
    <canvas id="canvas-2"></canvas>

    <script>
        // Basic example
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        let path1 = new Path2D();
        path1.rect(10, 10, 100,100);

        let path2 = new Path2D(path1);
        path2.moveTo(220, 60);
        path2.arc(170, 60, 50, 0, 2 * Math.PI);

        ctx.stroke(path2);

        // SVG Path example
        const canvas2 = document.getElementById('canvas-2');
        const ctx2 = canvas2.getContext('2d');
        let p = new Path2D('M10 10 h 80 v 80 h -80 Z');
        ctx2.fill(p);
    </script>
</body>
</html>
